<template>
  <div id="app">
    <div class="wuwang" v-show="!onLine">
      <img class="pic" src="../static/img/无网络.png">
      <span class="onLineText">网络不可用</span>
    </div>

    <router-view/>
  </div>
</template>

<script>
  import rem from './rem/rem.js'

  export default {
    name: 'app',
    data() {
      return {
        transitionName: '',
        onLine: navigator.onLine,
      }
    },
    methods: {
      //网络发生变化
      updateOnlineStatus(e) {
        const {type} = e;
        this.onLine = type === 'online';
      },

    },
    mounted() {
      //网络的监听
      window.addEventListener('online', this.updateOnlineStatus);
      window.addEventListener('offline', this.updateOnlineStatus);
    },
    beforeDestroy() {
      window.removeEventListener('online', this.updateOnlineStatus);
      window.removeEventListener('offline', this.updateOnlineStatus);
    }


  }
</script>

<style>
  @import 'styles/style.css';
  @import './fon/iconfont.css';

  body {
    /* padding-bottom:1.56rem; */
    background: #F4F4F4;
    /* font-family: 'Avenir', Helvetica, Arial, sans-serif; */
  }

  .mint-swipe-indicator {
    background: #000;
    border: 1px solid black
  }

  .mint-swipe-indicator.is-active {
    background: #ddd;
  }

  .wuwang {
    display: table;
    overflow: hidden;
    width: 100%;
    height: 30px;
    background: #ffdbcb;
  }

  .onLineText {
    margin-left: 10px;
    vertical-align: middle;
    color: #81838e;
    font-size: 14px;
  }

  .pic {
    margin-left: 10px;
    width: 15px;
    height: 15px;
  }
</style>
